<!-- 客户管理 -->
<template>
  <div style="padding: 10px">
    <div class="client">
      <!-- 头部 -->
      <el-row>
        <el-col :span="24" class="client_head">
          <el-button type="primary" @click="clientAddFn">添加客户</el-button>
          <div class="client_head_right">
            <!-- 选择经济 -->
            <div class="client_choose" @mouseover="clientAgentFn">
              <el-select
                v-model="clientLiast.agent"
                placeholder="请选择活动区域"
              >
                <el-option label="全部经纪" value="全部经纪" />
                <el-option
                  v-for="item in clientAgentData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </div>
            <!-- 筛选按钮 -->
            <el-input v-model="clientLiast.name_contains" />
            <el-button @click="searchFn">筛选</el-button>
          </div></el-col
        >
      </el-row>
      <!-- 表格 -->
      <el-row style="margin-top: 20px">
        <el-col :span="24">
          <el-table :data="clientData" border style="width: 100%">
            <el-table-column prop="image" label="照片">
              <template v-slot="{ row }"
                ><img :src="row.image" alt="" style="height: 150px"
              /></template>
            </el-table-column>
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="phone" label="电话" />
            <el-table-column prop="agent.name" label="经济" />
            <el-table-column prop="wechat" label="微信" />
            <el-table-column prop="desc" label="介绍" />
            <el-table-column label="操作">
              <template v-slot="{ row }">
                <el-button type="primary" @click="editorFn(row.id)"
                  >编辑</el-button
                >
                <el-button type="danger" @click="delFn(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <!-- 分页组件 -->
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pagingData._limi"
          :total="total"
          @current-change="currentChange"
        />
      </el-row>
    </div>
    <!-- 新增组件 -->
    <addClient
      ref="editorDataAddFn"
      :dialog-visible="dialogVisible"
      :add-ahent-data="addAhentData"
      :editor-data="editorData"
      @handleCloseFn="handleCloseFn"
      @clientVisibleFn="clientVisibleFn"
    />
  </div>
</template>

<script>
import addClient from "./components/add-client.vue";
import { getClient, getClientID, getClientDel } from "@/api/client";
import { getAgents } from "@/api/agent.js";
export default {
  components: { addClient },
  data() {
    return {
      // 分页
      pagingData: {
        _limit: 2,
        _start: 0,
      },
      total:0,
      // 筛选
      searchData: [],
      // 编辑
      editorData: {},
      // 列表
      clientLiast: {
        name_contains: "",
        agent: "",
      },
      agentID:0,
      clientData: [],
      // 模态框
      dialogVisible: false,
      addAhentData: [],
      // 经纪人
      clientAgentData: [],
      clientText: "",
    };
  },
  async created() {
    this.getClientFn();
    const res = await getAgents();
    this.clientAgentData = res.data;
    this.totalFn()
  },
  methods: {
    // 查询经济
    async searchFn() {
      // console.log(this.clientLiast);
      this.clientAgentData.forEach(item=>{
        if (item.name===this.clientLiast.agent) {
          this.agentID = item.id
        }
      })
      if (this.clientLiast.name_contains!=='') {
        const res = await getClient({
          name_contains:this.clientLiast.name_containss,
          agent:this.agentID
        })
        this.clientData = res.data
        this.total = 0
      }
      if (this.clientLiast.agent==='全部经济') {
        this.getClientFn()
        this.currentChange(page)
        this.totalFn()
      }
    },
    // 分页
    async currentChange(page) {
      this.pagingData._start = (page - 1) * this.pagingData._limit;
      const res = await getClient(this.pagingData);
      this.clientData = res.data;
    },
    async totalFn(){
      const res = await getClient()
      const data = res.data
      this.total = Math.ceil(data.length / this.pagingData._limit) * 10
    },
    // 删除
    delFn(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await getClientDel(id);
          this.getClientFn();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 编辑
    async editorFn(id) {
      this.dialogVisible = true; // 弹出模态框
      const res = await getClientID(id);
      this.editorData = res.data;
      this.$nextTick(() => {
        this.$refs.editorDataAddFn.editorDataFn();
      });
    },
    // 渲染经纪人
    async clientAgentFn() {
      const res = await getAgents();
      this.clientAgentData = res.data;
    },
    textClientFn(text) {
      this.textClient = text;
    },
    // 渲染页面
    async getClientFn() {
      const res = await getClient(this.pagingData);
      this.clientData = res.data;
    },
    // 模态框
    async clientAddFn() {
      this.dialogVisible = true; // 弹出模态框
      const res = await getAgents();
      this.addAhentData = res.data;
      this.$nextTick(() => {
        this.$refs.editorDataAddFn.delImgFn();
      });
    },
    clientVisibleFn() {
      this.dialogVisible = false; // 关闭模态框
      this.getClientFn();
    },
    handleCloseFn() {
      this.dialogVisible = false; // 关闭模态框
    },
  },
};
</script>

<style scoped>
.client {
  padding: 10px;
  border: 1px solid rgb(234, 232, 232);
}
.client_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.client_choose {
  width: 350px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 1px solid #000;
  border: 1px solid rgb(234, 232, 232);
}
.el-dropdown {
  display: flex;
  justify-content: space-between;
}
.client_head_right {
  display: flex;
}
</style>
